<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.4.1.min.js"></script>
<!--    bootstrap5-->
<!--    <link rel="stylesheet" href="/css1/bootstrap.min.css">-->
<!--    <script src="/js1/bootstrap.min.js"></script>-->

<!--    bootstrap3-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">


    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">


</head>
<body>


<!--<form action="" method="get" class="form-horizontal">-->
<!--    <div class="input-group search-input-group">-->
<!--        <input type="hidden" name="scope" value="1">-->
<!--        <input name="key" autocomplete="off" type="text" class="form-control" placeholder="输入要搜索的内容关键字" >-->
<!--        <span class="input-group-addon">-->
<!--<button type="submit">-->
<!--<span class="glyphicon glyphicon-search"></span>-->
<!--</button>-->
<!--</span>-->
<!--    </div>-->
<!--</form>-->



<!--<div class="btn-group">-->
<!--    <button class="hj-btn dropdown-toggle" data-toggle="dropdown">筛选-->
<!--        <i class="fa fa-angle-down icon-on-right"></i>-->
<!--    </button>-->
<!--    <div class="dropdown-menu" style="width: 350px;left: 10px;padding: 10px;line-height: 26px">-->
<!--        <div class="form-group clearfix">-->
<!--            <label class="control-label col-sm-3 text-nowrap">业务日期</label>-->
<!--            <div class="col-sm-9 col-xs-9">-->
<!--                <input type="text" class="hj-input" value="" id="" readonly style="width: 80px"/>-->
<!--                <span class="hj-label" style="margin: 0 5px">至</span>-->
<!--                <input type="text" class="hj-input" value="" id="" readonly style="width: 80px"/>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group m-t-xs clearfix">-->
<!--            <label class="control-label col-sm-3 text-nowrap">物资分类：</label>-->
<!--            <div class="col-sm-9 col-xs-9">-->
<!--                <select class="hj-select" name="classification" style="width: 180px">-->

<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group m-t-xs clearfix">-->
<!--            <label class="control-label col-sm-3 text-nowrap">盘点状态：</label>-->
<!--            <div class="col-sm-9 col-xs-9">-->
<!--                <select class="hj-select" name="state" style="width: 180px">-->

<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group m-t-xs clearfix">-->
<!--            <label class="control-label col-sm-3 text-nowrap">库存数量：</label>-->
<!--            <div class="col-sm-9 col-xs-9">-->
<!--                <select class="hj-select" name="quantity" style="width: 180px">-->

<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group m-t-xs clearfix">-->
<!--            <input type="checkbox" name="isZero" class="hj-checkbox" style="margin-left: 10px!important;"/>-->
<!--            <span class="hj-label">不显示零库存物资</span>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <div class="col-xs-12 text-center">-->
<!--                <button class="sure btn btn-info">确定</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->




<div style="margin-left:200px;margin-top:100px;width:1000px;border:1px solid #337ab7">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">条件查询</h3>
        </div>
        <div class="panel-body">
            <div style="display:inline-block;">

                <div style="float:left;padding:6px;">
                    <span>姓名：</span>
                </div>
                <div style="float:left;">
                    <input id="searchName" class="form-control" style="width:200px;" placeholder="请输入姓名" />
                </div>
                <div style="float:left;padding:6px;">
                    <span>性别：</span>
                </div>
                <div style="float:left;">
                    <select id="gender" class="form-control" style="width:200px;">
                        <option value="">请选择</option>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
                <div style="float:left;margin-left:20px;">
                    <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
                    </button>
                    <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
                    </button>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
                        <span class="glyphicon glyphicon-plus">
                        </span>新增
                    </button>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-bordered" id="stuTable"></table>
</div>

<!-- 学生Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">学生信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <input hidden="hidden" id="id" name="id">
                    <div class="form-group">
                        <label for="sno">学号</label>
                        <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno">
                    </div>
                    <div class="form-group">
                        <label for="sname">姓名</label>
                        <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" aria-describedby="emailHelp" placeholder="Enter score" name="score">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveStudent();">
                    <span class="glyphicon glyphicon-floppy-save"></span>
                    保存
                </button>
            </div>
        </div>
    </div>
</div>




<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<!--<script src="/pagejs/student/list.js"></script>-->
<script>
    /**
     * 刷新数据
     */
    function resetList(){
        $("#searchName").val("");
        $("#gender").val("");
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
    }

    /**
     * 根据姓名查询学生
     */
    function getList(){
        var name = $("#exampleInputName2").val().toString();
        if(name == null || name == ""){
            alert("请输入要查询的姓名");
        } else{

            console.log(name)
            $.ajax({
                url: "/webapi/student/getList/" + name,
                method: "get"
            }).done(function (rs){
                let len = rs.length;
                if(len == 0){
                    alert("查无此人");
                } else{
                    let html = "";
                    for(let i = 0; i < len; i++){
                        let item = rs[i];
                        html+="<tr>"
                            +"<td>"+item.id+"</td>"
                            +"<td>"+item.sno+"</td>"
                            +"<td>"+item.sname+"</td>"
                            +"<td>"+item.sex+"</td>"
                            +"<td>"+item.score+"</td>"
                            +"<td> "
                            +"<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+item.id+");'>编辑</a>   "
                            +"<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+item.id+")'>删除</a>"
                            +"</td>"
                            +"</tr>"
                        $("#studentTb").html(html)
                    }
                }



            })

        }


    }

    /**
     * 与表进行判断查询
     */
    // function getList(){
    //     var name = $("#exampleInputName2").val().toString();
    //     // alert(name)
    //     console.log(name)
    //     $.ajax({
    //         url: "/webapi/student/list",
    //         method:"get"
    //     }).done(function (rs){
    //         // loadTable();
    //         // console.log(name);
    //         let len = rs.length;
    //         let html = "";
    //         for(let i = 0; i < len; i++){
    //             let item = rs[i];
    //            if(item.sname == name){
    //                html+="<tr>"
    //                    +"<td>"+item.id+"</td>"
    //                    +"<td>"+item.sno+"</td>"
    //                    +"<td>"+item.sname+"</td>"
    //                    +"<td>"+item.sex+"</td>"
    //                    +"<td>"+item.score+"</td>"
    //                    +"<td> "
    //                    +"<a href='#' onclick='editStudent("+item.id+");'>编辑</a>   "
    //                    +"<a href='#' onclick='deleteStudent("+item.id+")'>删除</a>" +
    //                    "</td>"
    //                    +"</tr>"
    //                $("#studentTb").html(html)
    //            }else if(name == " " || name == null){
    //                loadTable()
    //            }
    //         }
    //     })
    //
    // }


    /**
     * 点击新增时给id赋值，以便判断做新增操作
     */
    function preAdd(){
        $("#id").val(0);//提示新增
        $("#sno").val("");
        $("#sname").val("");
        $("#sex").val("");
        $("#score").val("");
    }

    /**
     * 根据id判断是新增还是更新，判断之后做新增和更新操作
     */
    function saveStudent(){
        var data = $('#formStudent').serialize();

        var id = $("#id").val();

        if(id < 1) {

            //是新增
            $.ajax ({
                url:"/webapi/student/insert",
                method:"post",
                data:data
            }).done(function () {
                $('#stuTable').bootstrapTable('destroy');
                loadTable();
                $('#myModal').modal('hide');
            });
        }
        else {

            //是更新
            $.ajax ({

                url:"/webapi/student/update",
                method:"put",

                data:data

            }).done(function () {

                $('#stuTable').bootstrapTable('destroy');
                loadTable();
                $('#myModal').modal('hide');
            });
        }
    }



    // 增加学生
    function addStudent(){
        let data = $("#formStudent").serialize();
        $.ajax({
            url: "/webapi/student/insert",
            method:"post",
            data:data
        }).done(function (){
            $('#myModal').modal('hide');
            // alert("添加成功！")
            console.log("添加成功");
            $('#stuTable').bootstrapTable("destroy");
            loadTable();
        })
    }

    // 删除学生
    function deleteStudent(id){

        console.log("111");
        // let rows = $("#stuTable").bootstrapTable('getSelections');
        // console.log(rows.id);
        if(confirm("您是否真的要删除吗？")){
            $.ajax({
                url:"/webapi/student/delete/"+id,
                method:"delete"

            }).done(function (){
                alert("删除成功");
                $('#stuTable').bootstrapTable("destroy");
                loadTable();
            })
        }
    }

    // 修改之前获取学生信息
    function editStudent(id){
        $('#myModal').modal('show')
        $.ajax({
            url:'/webapi/student/get/'+id
        }).done(function (rs){

            $("#id").val(rs.id);
            $("#sno").val(rs.sno);
            $("#sname").val(rs.sname);
            $("#sex").val(rs.sex);
            $("#score").val(rs.score);

        })
    }

    // boostrapTable查询
    function search(){
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
    }


    /**
     * 显示整个学生列表
     */
    function loadTable(){

        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            striped:true, //设置为ture有隔行变色效果
            pagination:true,//设置为true会在底部显示分页条
            singleSelect: false,//设置为true将禁止多选
            pageSize:5,   //设置分页的每页条数
            pageNumber:1, //设置了分页，首页页码
            uniqueId : "id", //每一行的唯一标识，一般为主键列
            showColumns: true,
            showRefresh: false,

            showExport: true,
            exportTypes: ['csv','txt','xml'],

            search:false,// 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showToggle : true, // 是否显示详细视图和列表视图的切换按钮
            clickToSelect: true,
            onClickRow: function (row) {
                // 这个是点击哪个行，就能获取那个行数据
                // row.后面对应你的表格fieId数据.
                    id=row.id;
                    sno=row.sno;
                    sname=row.sname;
                    sex=row.sex;
                    score = row.score;
            },
            sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
            queryParams: function (params){

                let paraObj = {
                    size: params.limit,
                    page: params.offset/params.limit,
                    sort: "id",
                    direct: "desc",
                    sname:$("#searchName").val(),
                    sex:$("#gender").val()
                };

                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '序号'
            },{
                field: 'sno',
                title: '学号'
            }, {
                field: 'sname',
                title: '姓名'
            }, {
                field: 'sex',
                title: '性别'
            }, {
                field: 'score',
                title: '成绩'
            },{
                field: 'id',
                title: '操作',
                align: 'center',
                formatter: function(value,row,index){
                // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
                // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
                    let e = "<button  class='btn btn-primary btn-xs' style='width: 60px;height: 30px' onclick='editStudent("+row.id+");'>" +
                        "<span class='glyphicon glyphicon-edit'></span>编辑</button> "
                    let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
                        "<span class='glyphicon glyphicon-trash'></span>删除</button>"
                return e + d ;
            },width:250 //自定义修改，增加修改、删除标志
            }],
            formatNoMatches: function (){
                return "没有相关的匹配结果";
            },
            formatLoadingMessage:function (){
                return "请稍等，正在加载中...";
            }
        })



    }//end of loadTable()



    $(function(){
        $.ajax({
            url:'/webapi/login/user'
        }).done(function (rs){
            if(rs > 0){
                loadTable()
            }else{
                window.location.href="/login/user"
            }
        })

    })
</script>

</body>
</html>